<template>
	<view class="box">
		<image class="bg" :src="bgImg" mode="widthFix"></image>
		<myNav />
		<view class="df flex-col top fs48">
			<text>您好!</text>
			<text class="mgt-20"> 欢迎登录/注册</text>
		</view>
		<view class="bottom flex-col pdl-60 pdr-60 pdt-20">
			<!-- <view class="df flex-ac flex-sb">
				<view class="df" :class="currentIndex== index ?'tab tab_active':'tab'" v-for="(item,index) in list"
					:key="index" @click="handleTab(index)">
					<image class="current_img" :src="getTabIcon(index)" mode="aspectFit"></image>
					<text class="fs28 flex-jc-ac tab_text">{{item.name}}</text>
				</view>
			</view> -->
			<view class="mgt-20">
				<tabLeft @changeData="changeData" />
				<!-- 手机快捷登录 -->
				<!-- <tabLeft v-if="currentIndex===0" @changeData="changeData" /> -->
				<!-- 账号密码登录 -->
				<!-- <tabRight v-if="currentIndex===1" @changeData="changeData" /> -->
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { useInformation } from '@/store/modules/index.ts'
	import { ref } from "vue";

	import { onUnload } from "@dcloudio/uni-app";

	import { login } from "@/api/login";

	import myNav from "../../components/myNav.vue"
	import tabLeft from "./components/tabLeft.vue"
	import tabRight from "./components/tabRight.vue"
	// import base_url from '../../request/config';

	import type { tabImg, LoginTab, LoginForm } from "../../static/src/types/login"

	const bgImg = `http://172.16.0.60:9000/ruoyi/2025/05/13/1d016cd34c434a79aaf155d5ffc2cc15.png`;

	const currentIndex = ref<number>(0);
	// tab图片
	const tabIcons = ref<tabImg>({
		left: {
			active: '/static/src/login/login_left_current.png',
			not_active: '/static/src/login/login_left_not_current.png'
		},
		right: {
			active: '/static/src/login/login_right_current.png',
			not_active: '/static/src/login/login_right_not_current.png'
		}
	});
	// const list = ref<LoginTab[]>([
	// 	{ name: "手机快捷登录" },
	// 	{ name: "账号密码登录" }
	// ]);
	const form = ref<LoginForm>({
		phonenumber: '',
		smsCode: '',
		password: '',
		grantType: ''
	});

	// 获取对应标签的图标
	// const getTabIcon = (index : number) => {
	// 	const location = index === 0 ? 'left' : 'right';
	// 	return currentIndex.value === index ? tabIcons.value[location].active : tabIcons.value[location].not_active;
	// };

	// const handleTab = (index : number) => {
	// 	currentIndex.value = index
	// };

	const changeData = (data : LoginForm) => {
		// console.log('data', data)
		form.value = data
		getData();
	};
	const getData = async () => {
		const user = useInformation()
		let formData = {
			...user.user,
			...form.value,
		}
		let res = await login(formData)
		if (res.code === 200) {
			user.setToken(res.data.access_token, res.data.expire_in)
			user.setClientId(res.data.client_id)
			user.setPhoneNumber(form.value.phonenumber)
			uni.showToast({ title: '登录成功' })
			setTimeout(() => uni.switchTab({ url: '/pages/index/index' }), 800)
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/style/style.scss';

	.box {
		.bg {
			position: fixed;
			width: 100%;
			height: 100;
			top: 0;
			left: 0;
			bottom: 0;
			z-index: -1;
		}

		.top {
			padding-top: 10rpx;
			margin-left: 31rpx;
			font-weight: 600;
			font-family: PingFang SC;
		}

		.bottom {
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			min-height: 80vh;
			background: rgba(255, 255, 255, .9);
			margin-top: 79rpx;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			overflow: hidden;

			.tab {
				position: relative;
				color: #3C51F2;
			}

			.tab_active {
				color: #ffffff;
			}

			.current_img {
				position: relative;
				width: 305rpx;
				height: 100rpx;
			}

			.tab_text {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}
		}
	}
</style>